<template>
  <transition name="fade">
    <div class="sexSelect">
      <div class="sexSelect-main" @click="divClick($event)" v-show="showSelect">
        <ul>
          <li v-for="(item, index) in list" :key="index" class="input-box flex-box">
            <div class="flex-box"><p>{{item}}</p><input name="sex" type="radio" @click="selectVal(item,index)"></div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>
<script>
// @ is an alias to /src

export default {
  data() {
    return {
      list: "",
      choosen: {
        value: "",
        index: ""
      }
    };
  },
  name: "needs",
  props: ["showSelect", "selectValue"],
  computed: {},
  methods: {
    clotheTanchuang() {
      this.$emit("tcClothe");
    },
    divClick(e) {
      e.stopPropagation();
    },
    selectVal(item, index) {
      this.choosen.value = item;
      this.choosen.index = index;
      this.$emit("tcClothe", this.choosen);
    }
  },
  mounted() {
    this.list = this.selectValue;
    let self = this;
    document.onclick = function() {
      self.clotheTanchuang();
    };
  }
};
</script>
<style lang="scss" scoped>
.sexSelect {
  width: 100%;
  height: 150vh;
  position: fixed;
  top: -50vh;
  left: 0;
  z-index: 999;
  z-index: 6666;
  background: rgba($color: #000000, $alpha: 0.7);
  .sexSelect-main {
    width: 100%;
    position: absolute;
    bottom: r(-4);
    background: #fff;
    ul {
      display: block;
      padding-bottom: 0;
      border: 0;
      padding-left: r(15);
      padding-right: r(15);
      li {
        & > div {
          justify-content: space-between;
        }
        p {
          display: block;
          font-size: r(16);
          color: #717276;
        }
        input[type="radio"] {
          width: 24px;
        }
        &:last-child {
          border: none;
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.25s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(100px);
}
</style>
